<template>
	<view class="box">
		<view class="topbox">
			<view class="inputbox">
				<image src="../../static/image/搜索.png" mode=""></image>
				<input type="text" value="" placeholder="快来搜索好物吧~" />
			</view>
			<view class="quxiao">
				取消
			</view>
		</view>
		<BaseTitles name="历史记录" :flag="flag"></BaseTitles>
		<BaseLable></BaseLable>
		<view class="hr"></view>
		<BaseTitles name="热门搜索"></BaseTitles>
		<BaseLable @lable="lable"></BaseLable>
	</view>
</template>

<script>
	import BaseTitles from "../../components/BaseTitles/index.vue"
	import BaseLable from "../../components/BaseLable/index.vue"
	export default {
		data() {
			return {
				name:'历史记录',
				flag:true
			}
		},
		components: {
			BaseTitles,
			BaseLable
		},
		methods:{
			lable(){
				this.jumpLink({link:"/pagesB/search_result/index"})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.topbox {
			display: flex;
			align-items: center;

			.inputbox {
				display: flex;
				align-items: center;
				width: 590rpx;
				height: 68rpx;
				background-color: #ffffff;
				border-radius: 34rpx;
				margin-left: 25rpx;
				padding: 10rpx 30rpx;
				box-sizing: border-box;
				margin-top: 10rpx;

				image {
					width: 26rpx;
					height: 27rpx;
				}

				input {
					margin-left: 20rpx;
					font-family: PingFang-SC-Medium;
					font-size: 24rpx;
				}
			}

			.quxiao {
				font-family: MicrosoftYaHei;
				font-size: 30rpx;
				color: #444444;
				margin-left: 40rpx;
				font-weight: 700;
			}
		}
	}

	.hr {
		width: 100%;
		height: 1rpx;
		background-color: #dcdcdc;
		margin-top: 40rpx;
	}
</style>
